import { Button, Card, Form, Input, message, Select, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import {SearchOutlined} from  "@ant-design/icons"
import { useForm } from 'antd/lib/form/Form'
import { ColumnsType } from 'antd/lib/table'
import { HospitalListType, ProvinceList } from '@/api/hospital/model/hospitalListTypes'
import { reqGetcityList, reqGetdistrictList, reqGetHospitalList, reqGethostypeList, reqGetProvinceList, reqUpdateHospitalStatus } from '@/api/hospital/hospitalList'
import { useNavigate } from 'react-router-dom'
const { Option } = Select;


export default function HospitalList() {
  let [limit,setLimit] = useState(5)

  let [page,setPage] = useState(1)

  let [total,setTotal] = useState(100)

  // 省份
  let [ProvinceList,setProvinceList] = useState<ProvinceList>([])

  // 市
  let [city,setCity] = useState<ProvinceList>([])

  // 区
  let [district,setDistrict] = useState<ProvinceList>([])


// 医院列表数据
let [hospitalList,setHospitalList] = useState<HospitalListType>([])

// 医院等级状态
let [hostype,setHostype] =  useState<ProvinceList>([]);

// Navigate
let navigate = useNavigate()

  //表单对象
  let [form] = useForm()

  //获取表单数据

  let finish = ()=>{
  getHospitalList()
  }

   //清空表单
   let reset = ()=>{
    form.resetFields()
    getHospitalList()

   }

  //  请求医院列表数据 
  let getHospitalList = async ()=>{
    //  获取表单搜索数据
    let value = form.getFieldsValue()

    //请求api 接口
    let result = await reqGetHospitalList({page,limit,...value})
    // console.log(result);
    //设置医院列表数据
    setHospitalList(result.content)
    //设置医院总数
    setTotal(result.totalElements)
    
  }


  // 初始化
  useEffect(()=>{
    getHospitalList()
  },[page,limit])

  //获取省份信息
  useEffect(()=>{
    async function main(){
      let result = await reqGetProvinceList()
      // console.log(result);
      setProvinceList(result)
      
    }
    main()
  },[])

// 获取医院等级信息
useEffect(()=>{
  async function main(){
    let result = await reqGethostypeList()

    setHostype(result)
  }
  main()
},[])

// 切换省份获取市的信息
let Provincechange = async (id:any) =>{
  // 清空市的数据
  setCity([])
  // 清空表单市的数据
  form.setFieldsValue({"cityCode":undefined,"districtCode":undefined})
  // 请求市api
  let result = await reqGetcityList(id)
  // 设置市状态
  setCity(result)
}

// 切换市 获取区的信息
let citychange = async (id:any)=>{
  setDistrict([])
  form.setFieldsValue({"districtCode":undefined})

  let result = await reqGetdistrictList(id)
  setDistrict(result)
}

// 切换医院上下线
let changestatus = (id:string,status:number)=>{
  return async ()=>{
    let sta = status === 0 ? 1 : 0

    await reqUpdateHospitalStatus(id,sta)

    message.success("更新成功")

    let newhospital = hospitalList.map(item=>{
      if(item.id === id){
        item.status ? item.status = 0 : item.status = 1
      }
      return item
    })

    setHospitalList(newhospital)
  }
}








  //表格表头信息数据
let columns:ColumnsType<any> = [
  {
    title:"序号",
    align:"center",
    width:80,
    render:(x:any,y:any,index:number)=>{
      return index+1
    }
  },
  {
    title:"医院logo",
    align:"center",
      dataIndex:"logoData",
      //当 设置 dataIndex 时,第一参数 就是 dataIndex 值
      //当 不设置 dataIndex 时,第一个参数 是当前的一行数据对象
      render:(data)=>{
        return<img width="100px" alt='' src={`data:image/jpeg;base64,${data}`}></img>
      }
    },
    {
      title:"医院名称",
      align:"center",
      dataIndex:"hosname",
    },
    {
      title:"等级",
      align:"center",
     render:(data)=>{
      return data.param.hostypeString
     }
    },
    {
      title:"详细地址",
      align:"center",
      dataIndex:"param",

      render:(data)=>{
        return data.fullAddress
      }
      
    },
    {
      title:"状态",
      align:"center",
      dataIndex:"status",
      render:(data)=>{
        return data === 0 ? "未上线" : "已上线"
      }
      

    },
    {
      title:"创建时间",
      align:"center",
      dataIndex:"createTime",
    },
    {
      title:"操作",
      fixed:"right",
      align:"center",
      width:"230px",
      render:(row)=>{
        return <div>
          <Button 
          onClick={()=>{
            navigate(`/syt/dashboard/hospitalList/show/${row.id}`)
          }} className='mr' type='primary' size='small'>查看</Button>
          <Button className='mr' type='primary' size='small'>排班</Button>
         {
          row.status ? <Button onClick={changestatus(row.id,row.status)} type='primary' size='small' danger>下线</Button> 
          : <Button onClick={changestatus(row.id,row.status)} type="primary" size="small" className='ml'>上线</Button>
         }


          

        </div>
      }
    }
  
]

  return (
    <Card>
   
    {/* 顶部搜索 */}
    <Form
            form={form}
            layout="inline"
            name="basic"
            initialValues={{ remember: true }}
            autoComplete="off"
            onFinish={finish}
            onReset={reset}
        >
            <Form.Item
            name="provinceCode"
            >
              <Select 
              onChange={Provincechange}
              placeholder="请选择省"
              style={{width:140}}
              >
              {
                ProvinceList.map((item)=>{
                  return <Option key = {item.id}
                   value={item.id}
                  >{item.name}</Option>
                })
              }
            </Select>
            
            </Form.Item>

            <Form.Item
            name="cityCode"
            >
              <Select 
              onChange={citychange}
              placeholder="请选择市"
              style={{width:140}}
              >
    {
          city.map((item)=>{
            return <Option key={item.id} value={item.id}>{item.name}</Option>
          })
    }            
            </Select>
            
            </Form.Item>

            <Form.Item
            name="districtCode"
            >
              <Select 
              placeholder="请选择区"
              style={{width:140}}
              >
               {
                district.map(item=>{
                  return <Option key={item.id} value={item.id}>{item.name}</Option>
                })
               }
            </Select>
            
            </Form.Item>

            <Form.Item name="hosname">
              <Input placeholder='医院名称'></Input>
            </Form.Item>

            <Form.Item name="hoscode">
              <Input placeholder='医院编号'></Input>
            </Form.Item>

            <Form.Item name="hostype">
              <Select  placeholder="医院类型" style={{ width: 140 }}>
                   {
                    hostype.map(item =>{
                      return <Option key={item.id} value={item.value}>{item.name}</Option>
                    })
                   }
              </Select>
          </Form.Item>

          <Form.Item name="status">
              <Select  placeholder="医院状态" style={{ width: 140 }}>
                    <Option value={0}>未上线</Option>
                    <Option value={1}>已上线</Option>
                   
              </Select>
          </Form.Item>

            <Form.Item className='h-20' wrapperCol={{ offset: 2, span: 16 }}>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
                查询
            </Button>
            </Form.Item>

            <Form.Item className='h-20' wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="default"  htmlType="reset">
                清空
            </Button>
            </Form.Item>
        </Form>

       
         {/* 表格数据 */}
          <Table
          // loading={loading}
          rowKey={"id"}
           pagination={{
                current:page,  // 当前页码
                total:total,  //总数,
                showQuickJumper:true,  //是否快速跳转至某页
                showSizeChanger:true,  //是否展示 pageSize 切换器，当 total 大于 50 时默认为 true
                pageSizeOptions:[4,6,8,10],    //指定每页可以显示多少条
                showTotal:(total)=>{   //用于显示数据总量和当前数据顺序
                    return <span>当前总数是:{total} 条</span>
                },
                onChange:(page:number, pageSize:number)=>{
                    setPage(page)
                    setLimit(pageSize)
                }

            }} 
            rowSelection={{
                type:"checkbox",
                // onChange:change
            }}
            scroll={{x:"1400px"}} className='h-20' bordered
             columns={columns} dataSource={hospitalList} >
          </Table>


   </Card>
  )
}
